<template>
  <div class="shop_info_wrapper">
    <div class="box shop">
      <img src="https://cube.elemecdn.com/8/0d/932e59969bf79bd32e49f080111b1png.png?x-oss-process=image/format,webp/resize,w_460,h_260,m_fixed">
      <h3 class="name">{{shopDetailData.name}}</h3>
      <p class="desc">{{shopDetailData.promotion_info}}</p>
      <div class="brand_story">查看品牌故事</div>
    </div>
    <div class="box activity">
      <h3 class="title">活动与属性</h3>
      <ul class="actibities_ul">
        <li v-for="item in shopDetailData.activities" :key="item.id">
          <span class="icon" :style='{backgroundColor: "#" + item.icon_color}'>{{item.icon_name}}</span>
          <span>{{item.description}}(APP专享)</span>
        </li>
      </ul>
      <ul class="actibities_ul">
        <li v-for="item in shopDetailData.supports" :key="item.id">
          <span class="icon" :style='{backgroundColor: "#" + item.icon_color}'>{{item.icon_name}}</span>
          <span>{{item.description}}(APP专享)</span>
        </li>
      </ul>
    </div>
    <!-- <div class="box shop_status_container">
      <div class="shop_status_header">
        <span class="title">食品监督安全公示</span>
        <div>
          <span class="identification_detail">企业认证详情</span>
        </div>
      </div>
      <div class="shop_statu_detail">
        <div>
        </div>
        <div class="check_date">
          <p>
            <span>监督检查结果：</span>
            <span class="shop_status_well">良好</span>
            <span class="shop_status_bad">差</span>
          </p>
          <p>
            <span>检查日期：</span>
            <span></span>
          </p>
        </div>
      </div>
    </div> -->
    <div class="box delivery">
      <h3 class="title">配送信息</h3>
      <div><span>由蜂鸟快送提供配送，约30分钟送达，距离1.8km</span></div>
      <div>配送费￥2.1</div>
    </div>
    <div class="box merchant_pic">
      <h3 class="title">商家实景</h3>
      <div class="pic_con">
        <a href="javascript:"><img src="https://cube.elemecdn.com/2/ff/35ff0603c4df2be45ab0232ac1f00jpeg.jpeg?x-oss-process=image/format,webp/resize,w_200,h_200,m_fixed">
          <span>大堂(1张)</span>
        </a>
        <a href="javascript:"><img src="https://cube.elemecdn.com/c/16/31890f3574f4b926aaba0b5cb2965jpeg.jpeg?x-oss-process=image/format,webp/resize,w_200,h_200,m_fixed">
          <span>门面(1张)</span>
        </a>
      </div>
    </div>
    <div class="box merchant_info">
      <h3 class="title">商家信息</h3>
      <ul class="detail-3mz9N">
        <li>暂无简介</li>
        <li>
          <span>品类</span>
          <span>{{shopDetailData.category}}</span>
        </li>
        <li>
          <span>商家电话</span>
          <span class="contact">
            <span class="iconfont">&#xe64d;</span>
            <span>联系商家</span>
          </span>
        </li>
        <li>
          <span>地址</span>
          <span>{{shopDetailData.address}}</span>
        </li>
        <li>
          <span>营业时间</span>
          <span>{{shopDetailData.opening_hours}}</span>
        </li>
      </ul>
    </div>
    <div class="box merchant_info">
      <h3 class="title">营业资质</h3>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ShopInfo',
  props: ['shopDetailData']
}
</script>

<style lang="stylus" scoped>
  .shop_info_wrapper
    background: #f5f5f5
    overflow: hidden
    .box
      padding: .3rem
      margin-bottom: .2rem
      background: #fff
      font-size: .26rem
      line-height: .4rem
      .title
        color: #000
        font-weight: 700
        font-size: .3rem
        line-height: .3rem
        margin-bottom: .15rem
      .pic_con
        display: flex
        a
          width: 1.56rem
          height: 1.56rem
          margin-right: .15rem
          display: block
          position: relative
          span
            display: block
            position: absolute
            bottom: 0
            width: 100%
            text-align: center
            height: .36rem
            line-height: .36rem
            color: #eee
            background-color: rgba(0, 0, 0, .6)
    .shop
      h3
        color: #333
        font-weight: 700
        font-size: .3rem
        margin: .3rem 0 .1rem
      .brand_story
        text-align: center
        margin-top: .3rem
        padding: .3rem 0 0
    .actibities_ul
      li
        margin-top: .2rem
        .icon
          font-size: 0.24rem
          color: #fff
          padding: .05rem
          border-radius: 0.05rem
          margin-right: .1rem
    .merchant_info
      ul li
        display: flex
        justify-content: space-between
        align-items: center
        padding: .3rem .3rem 0 0
        margin-right: -.3rem
        span
          width: 30%
          &:nth-child(2)
            width: 70%
            text-align: right
        &:not(:last-child)
          padding-bottom: .3rem
          border-bottom: .01rem #eee solid
        .contact
          color: #00a6ff
</style>
